<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span class="search-card-title">Condition Search</span>
        </div>
      </template>
      <el-form
        :inline="true"
        :model="searchInfo"
        class="demo-form-inline"
        ref="searchInfo"
      >
        <el-row>
          <el-form-item label="FirstBirth:" prop="firstBirth.lower_limit">
            <el-input
              style="width: 120px"
              v-model="searchInfo.firstBirth.lower_limit"
              placeholder="lower limit"
            ></el-input>
          </el-form-item>
          <el-form-item><i class="el-icon-right"></i></el-form-item>
          <el-form-item prop="firstBirth.upper_limit">
            <el-input
              style="width: 120px"
              v-model="searchInfo.firstBirth.upper_limit"
              placeholder="upper limit"
            ></el-input>
          </el-form-item>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <el-form-item label="BreastBiopsiesNum:">
            <el-radio-group v-model="searchInfo.breastBiopsiesNum">
              <el-radio label="0">0</el-radio>
              <el-radio label="1">1</el-radio>
              <el-radio label="≥2">≥2</el-radio></el-radio>
              <el-radio label="All">All</el-radio></el-radio>
            </el-radio-group>
          </el-form-item>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <el-form-item label="BreastCancerFamilyNum:">
            <el-radio-group v-model="searchInfo.breastCancerFamilyNum">
              <el-radio label="0">0</el-radio>
              <el-radio label="1">1</el-radio>
              <el-radio label="2">2</el-radio></el-radio>
              <el-radio label="≥3">≥3</el-radio></el-radio>
              <el-radio label="All">All</el-radio></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="MenarcheAge:" prop="menarcheAge.lower_limit">
            <el-input
              style="width: 120px"
              v-model="searchInfo.menarcheAge.lower_limit"
              placeholder="lower limit"
            ></el-input>
          </el-form-item>
          <el-form-item><i class="el-icon-right"></i></el-form-item>
          <el-form-item prop="menarcheAge.upper_limit">
            <el-input
              style="width: 120px"
              v-model="searchInfo.menarcheAge.upper_limit"
              placeholder="upper limit"
            ></el-input>
          </el-form-item>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <el-form-item label="VaR:" prop="VaR.lower_limit">
            <el-input
              style="width: 120px"
              v-model="searchInfo.VaR.lower_limit"
              placeholder="lower limit"
            ></el-input>
          </el-form-item>
          <el-form-item><i class="el-icon-right"></i></el-form-item>
          <el-form-item prop="VaR.upper_limit">
            <el-input
              style="width: 120px"
              v-model="searchInfo.VaR.upper_limit"
              placeholder="upper limit"
            ></el-input>
          </el-form-item>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <el-form-item label="Registration Time:" prop="reg_time">
            <el-date-picker
              v-model="searchInfo.reg_time"
              type="daterange"
              range-separator="to"
              start-placeholder="Start time"
              end-placeholder="End time"
            >
            </el-date-picker>
          </el-form-item>
        </el-row>
        <el-row>
          <el-col
            :span="6"
            :offset="18"
            style="text-align: end; padding-top: 10px; padding-right: 10px"
          >
            <el-button
              type="primary"
              size="mini"
              @click="searchForm(searchInfo)"
              >SEARCH</el-button
            >
            <el-button type="info" size="mini" @click="resetForm('searchInfo')"
              >RESET</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <br />
    <div
      :style="{ height: '600%', width: '100%' }"
      ref="mypolynomialCalculation"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import ecStat from "echarts-stat";
export default {
  name: "PolynomialCalculation",
  data() {
    return {
      option: {
        dataset: [
          {
            source: [
              [96.24, 11.35],
              [33.09, 85.11],
              [57.6, 36.61],
              [36.77, 27.26],
              [20.1, 6.72],
              [45.53, 36.37],
              [110.07, 80.13],
              [72.05, 20.88],
              [39.82, 37.15],
              [48.05, 70.5],
              [0.85, 2.57],
              [51.66, 63.7],
              [61.07, 127.13],
              [64.54, 33.59],
              [35.5, 25.01],
              [226.55, 664.02],
              [188.6, 175.31],
              [81.31, 108.68],
            ],
          },
          {
            transform: {
              type: "ecStat:regression",
              config: { method: "polynomial", order: 3 },
            },
          },
        ],
        title: {
          text: "Polynomial Calculation Table",
          textStyle: {
            fontSize: 25,
          },
          subtext:
            "Polynomial calculation of specific risk value under different influencing factors",
          left: "center",
          top: 16,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        xAxis: {
          splitLine: {
            lineStyle: {
              type: "dashed",
            },
          },
          splitNumber: 20,
        },
        yAxis: {
          min: -40,
          splitLine: {
            lineStyle: {
              type: "dashed",
            },
          },
        },
        series: [
          {
            name: "scatter",
            type: "scatter",
          },
          {
            name: "line",
            type: "line",
            smooth: true,
            datasetIndex: 1,
            symbolSize: 0.1,
            symbol: "circle",
            label: { show: true, fontSize: 16 },
            labelLayout: { dx: -20 },
            encode: { label: 2, tooltip: 1 },
          },
        ],
      },
      searchInfo: {
        menarcheAge: { lower_limit: "", upper_limit: "" }, //月经初产年龄
        firstBirth: { lower_limit: "", upper_limit: "" }, //初产年龄
        breastBiopsiesNum: "All", //乳腺活检次数
        VaR: { lower_limit: "", upper_limit: "" }, //年龄
        breastCancerFamilyNum: "All", //患有乳腺癌家属人数
        reg_time: [], //注册时间
      },
    };
  },
  mounted() {
    this.polynomialCalculation();
  },
  methods: {
    polynomialCalculation() {
      let myChart = this.$echarts.init(this.$refs.mypolynomialCalculation);
      echarts.registerTransform(ecStat.transform.regression);
      myChart.setOption(this.option);
    },
  },
};
</script>

<style scoped lang="scss">
.card-header {
  border-radius: 25px;
  background: #581d1d42;
}
.box-card {
  border-radius: 25px;
  background: #d6d5d542;
}
</style>